import React, { useRef } from "react";
import { gsap } from "gsap";
import { ScrollTrigger } from "gsap/ScrollTrigger";
import { useGSAP } from "@gsap/react";
import VideoZoom from "../../components/zh/VideoZoom"; // 导入视频缩放组件

gsap.registerPlugin(ScrollTrigger, useGSAP);

interface Panel {
  id: number;
  title: string;
  bgColor: string;
  icon: string;
  content: string;
}

const FullViewSplitScreenScroll: React.FC = () => {
  const firstPageRef = useRef<HTMLDivElement>(null);
  const secondPageRef = useRef<HTMLDivElement>(null);
  const thirdPageRef = useRef<HTMLDivElement>(null);
  const fourthPageRef = useRef<HTMLDivElement>(null);
  const containerRef = useRef<HTMLDivElement>(null);
  const contentWrapperRef = useRef<HTMLDivElement>(null);
  const horizontalScrollTrigger = useRef<ScrollTrigger | null>(null);

  useGSAP(() => {
    if (
      !secondPageRef.current ||
      !thirdPageRef.current ||
      !fourthPageRef.current ||
      !contentWrapperRef.current
    ) {
      return;
    }

    // 初始化设置
    gsap.set(secondPageRef.current, { y: "100%" });
    gsap.set(thirdPageRef.current, { y: "100%" });
    gsap.set(fourthPageRef.current, { y: "100%" });
    gsap.set(contentWrapperRef.current, { x: 0 });

    // 第一阶段：第二页向上移动覆盖第一页
    const coverAnimation = gsap.to(secondPageRef.current, {
      y: "0%",
      ease: "power2.inOut",
      scrollTrigger: {
        trigger: containerRef.current,
        start: "top top",
        end: "+=100%",
        scrub: 1,
      },
    });

    // 第二阶段：水平滚动第二页内容
    const horizontalScroll = gsap.to(contentWrapperRef.current, {
      x: () => -(contentWrapperRef.current!.offsetWidth - window.innerWidth),
      ease: "none",
    });

    horizontalScrollTrigger.current = ScrollTrigger.create({
      trigger: secondPageRef.current,
      start: "top top",
      end: () =>
        `+=${contentWrapperRef.current!.offsetWidth - window.innerWidth}`,
      scrub: 1,
      animation: horizontalScroll,
      onLeave: () => {
        // 当水平滚动完成后，启用第三页的显示
        gsap.to(secondPageRef.current, {
          y: "-100%",
          ease: "power2.inOut",
          scrollTrigger: {
            trigger: secondPageRef.current,
            start: "top top",
            end: "+=120%",
            scrub: 1,
          },
          onComplete: () => {
            // 第三页显示完成后，准备显示第四页
            gsap.to(thirdPageRef.current, {
              y: "-100%",
              ease: "power2.inOut",
              scrollTrigger: {
                trigger: thirdPageRef.current,
                start: "top top",
                end: "+=100%",
                scrub: 1,
              },
            });

            gsap.to(fourthPageRef.current, {
              y: "0%",
              ease: "power2.inOut",
              scrollTrigger: {
                trigger: thirdPageRef.current,
                start: "top top",
                end: "+=100%",
                scrub: 1,
              },
            });
          },
        });

        gsap.to(thirdPageRef.current, {
          y: "0%",
          ease: "power2.inOut",
          scrollTrigger: {
            trigger: secondPageRef.current,
            start: "top top",
            end: "+=100%",
            scrub: 1,
          },
        });
      },
    });

    ScrollTrigger.refresh();
  }, []);

  const panels: Panel[] = [
    {
      id: 1,
      title: "创意设计",
      bgColor: "linear-gradient(135deg, #ff9a9e 0%, #fad0c4 100%)",
      icon: "🎨",
      content: "专业UI/UX设计，打造卓越用户体验",
    },
    {
      id: 2,
      title: "形状设计",
      bgColor: "linear-gradient(135deg, #a1c4fd 0%, #c2e9fb 100%)",
      icon: "💻",
      content: " 依托于千万级人耳数据点，形态再优化",
    },
    {
      id: 3,
      title: "硬件配置",
      bgColor: "linear-gradient(135deg, #f6d365 0%, #fda085 100%)",
      icon: "⚙️",
      content: "得益于三分离架构，耳机打破声学瓶颈，",
    },
    {
      id: 4,
      title: "移动应用",
      bgColor: "linear-gradient(135deg, #84fab0 0%, #8fd3f4 100%)",
      icon: "📱",
      content: "跨平台移动应用开发解决方案",
    },
    {
      id: 5,
      title: "数据分析",
      bgColor: "linear-gradient(135deg, #a6c1ee 0%, #fbc2eb 100%)",
      icon: "📊",
      content: "大数据处理与可视化分析",
    },
  ];

  return (
    <div
      ref={containerRef}
      style={{
        position: "relative",
        height: "calc(500vh + (100vw * 0.8 * 5))",
        overflow: "hidden",
      }}
    >
      {/* 第一页 */}
      <div
        ref={firstPageRef}
        style={{
          position: "fixed",
          top: 0,
          left: 0,
          width: "100%",
          height: "100vh",
          display: "flex",
          justifyContent: "center",
          alignItems: "center",
          fontSize: "3rem",
          zIndex: 1,
        }}
      >
        <div>
          <img
            src="https://consumer.huawei.com/content/dam/huawei-cbg-site/cn/mkt/pdp/headphones/freebuds6/img/kv/huawei-freebuds-6-kv-last.jpg"
            alt=""
            style={{
              width: "1200px",
            }}
          />
        </div>
        <div style={{ position: "relative", left: "-150px" }}>
          <p style={{ fontSize: "22px" }}>
            <span style={{ fontWeight: "600" }}>LINGHANG </span>
            <span> FreeBuds6</span>
          </p>
          <p
            style={{
              display: "flex",
              justifyContent: "space-around",
              fontSize: "30px",
              margin: "10px, 0",
            }}
          >
            <span>悦</span>
            <span>彰</span>
            <span>耳</span>
            <span>机</span>
          </p>
          <p style={{ fontSize: "11px", margin: "10px 0" }}>
            超感知原声双单元I双向静谧通话1|半开放舒适佩戴
          </p>
          <p style={{ margin: "10px, 0" }}>￥999*起</p>
        </div>
      </div>

      {/* 第二页 */}
      <div
        ref={secondPageRef}
        style={{
          position: "fixed",
          top: 0,
          left: 0,
          width: "100%",
          height: "100vh",
          zIndex: 2,
          overflow: "hidden",
          backgroundColor: "#f8f9fa",
        }}
      >
        <div
          ref={contentWrapperRef}
          style={{
            display: "flex",
            width: "500%",
            height: "100%",
            alignItems: "center",
          }}
        >
          {panels.map((panel, index) => (
            <div
              key={panel.id}
              style={{
                width: "18%",
                height: "80%",
                textAlign: "center",
                background: panel.bgColor,
                display: "flex",
                flexDirection: "column",
                justifyContent: "center",
                alignItems: "center",
                color: "white",
                padding: "2rem",
                marginLeft: "8rem",
                boxSizing: "border-box",
                boxShadow: "0 10px 30px rgba(0,0,0,0.1)",
                borderRadius: "15px",
                position: "relative",
              }}
            >
              <div style={{ fontSize: "4rem", marginBottom: "1.5rem" }}>
                {panel.icon}
              </div>
              <h2 style={{ fontSize: "2.2rem", marginBottom: "1rem" }}>
                {panel.title}
              </h2>
              <p style={{ fontSize: "1.2rem", maxWidth: "80%" }}>
                {panel.content}
              </p>
              <button
                style={{
                  marginTop: "2rem",
                  padding: "12px 24px",
                  backgroundColor: "rgba(255,255,255,0.2)",
                  color: "white",
                  border: "2px solid white",
                  borderRadius: "30px",
                  fontSize: "1rem",
                  cursor: "pointer",
                }}
              >
                了解更多
              </button>
              <div
                style={{
                  position: "absolute",
                  bottom: "20px",
                  display: "flex",
                  gap: "8px",
                }}
              >
                {panels.map((_, i) => (
                  <div
                    key={i}
                    style={{
                      width: "10px",
                      height: "10px",
                      borderRadius: "50%",
                      backgroundColor:
                        i === index ? "white" : "rgba(255,255,255,0.3)",
                    }}
                  />
                ))}
              </div>
            </div>
          ))}
        </div>
      </div>

      {/* 第三页 - 视频页 */}
      <div
        ref={thirdPageRef}
        style={{
          position: "fixed",
          flexDirection: "column",
          top: 0,
          left: 0,
          width: "100%",
          height: "100vh",
          backgroundColor: "#fff",
          display: "flex",
          justifyContent: "center",
          alignItems: "center",
          zIndex: 3,
        }}
      >
        <h1 style={{ margin: "20px 0 ", fontSize: "3rem", color: "#43336C" }}>
          消噪音，轻松聊
        </h1>
        <p style={{ fontSize: "1.1rem", color: "#43336C" }}>
          通过骨传导麦克风和多通道降噪算法，精准识别声音信号，支持95dB噪音以及
        </p>
        <p style={{ fontSize: "1.1rem", color: "#43336C" }}>
          8 m/s
          风速下，消除环境声音，保留清晰干净的通话人声。即使身处聚会、比赛、
        </p>
        <p
          style={{
            fontSize: "1.1rem",
            color: "#43336C",
            marginBottom: " 3rem",
          }}
        >
          装修现场等高噪音环境，也能自在畅聊，保护隐私
        </p>
        <video
          autoPlay
          loop
          muted
          playsInline
          style={{
            width: "60%",
            height: "60%",
            objectFit: "cover",
            borderRadius: "15px",
          }}
        >
          <source
            src="https://consumer.huawei.com/content/dam/huawei-cbg-site/cn/mkt/pdp/headphones/freebuds6/img/sec13/huawei-freebuds-6-noise-reduction-1.mp4"
            type="video/mp4"
          />
          Your browser does not support the video tag.
        </video>
      </div>

      {/* 第四页 - 产品规格页 */}
      <div
        ref={fourthPageRef}
        style={{
          position: "fixed",
          top: 0,
          left: 0,
          width: "100%",
          height: "100vh",
          backgroundColor: "#f5f5f7",
          display: "flex",
          flexDirection: "column",
          justifyContent: "center",
          alignItems: "center",
          zIndex: 4,
          padding: "2rem",
          boxSizing: "border-box",
        }}
      >
        <h1
          style={{ fontSize: "2.5rem", color: "#1d1d1f", marginBottom: "2rem" }}
        >
          产品规格
        </h1>

        <div
          style={{
            display: "flex",
            margin: "0 auto",
            width: "80%",
            textAlign: "center",
            justifyContent: "center",
            marginBottom: "3rem",
          }}
        >
          {/* 左侧规格 */}
          <div style={{ width: "30%", textAlign: "left" }}>
            <h2
              style={{
                fontSize: "1.5rem",
                color: "#1d1d1f",
                marginBottom: "1.5rem",
              }}
            >
              技术参数
            </h2>
            <ul style={{ listStyle: "none", padding: 0 }}>
              <li
                style={{
                  marginBottom: "1rem",
                  fontSize: "1.1rem",
                  color: "#6e6e73",
                }}
              >
                <strong style={{ color: "#1d1d1f" }}>驱动单元：</strong>{" "}
                超感知原声双单元
              </li>
              <li
                style={{
                  marginBottom: "1rem",
                  fontSize: "1.1rem",
                  color: "#6e6e73",
                }}
              >
                <strong style={{ color: "#1d1d1f" }}>频响范围：</strong> 20Hz -
                20kHz
              </li>
              <li
                style={{
                  marginBottom: "1rem",
                  fontSize: "1.1rem",
                  color: "#6e6e73",
                }}
              >
                <strong style={{ color: "#1d1d1f" }}>蓝牙版本：</strong> 5.3
              </li>
              <li
                style={{
                  marginBottom: "1rem",
                  fontSize: "1.1rem",
                  color: "#6e6e73",
                }}
              >
                <strong style={{ color: "#1d1d1f" }}>续航时间：</strong>{" "}
                最长30小时（含充电盒）
              </li>
            </ul>
          </div>
          <div style={{ width: "60vh" }}>
            <VideoZoom />
          </div>

          {/* 右侧规格 */}
          <div style={{ width: "30%", textAlign: "left" }}>
            <h2
              style={{
                fontSize: "1.5rem",
                color: "#1d1d1f",
                marginBottom: "1.5rem",
              }}
            >
              尺寸与重量
            </h2>
            <ul style={{ listStyle: "none", padding: 0 }}>
              <li
                style={{
                  marginBottom: "1rem",
                  fontSize: "1.1rem",
                  color: "#6e6e73",
                }}
              >
                <strong style={{ color: "#1d1d1f" }}>单耳重量：</strong> 约5.5g
              </li>
              <li
                style={{
                  marginBottom: "1rem",
                  fontSize: "1.1rem",
                  color: "#6e6e73",
                }}
              >
                <strong style={{ color: "#1d1d1f" }}>充电盒重量：</strong> 约45g
              </li>
              <li
                style={{
                  marginBottom: "1rem",
                  fontSize: "1.1rem",
                  color: "#6e6e73",
                }}
              >
                <strong style={{ color: "#1d1d1f" }}>防水等级：</strong> IP54
              </li>
              <li
                style={{
                  marginBottom: "1rem",
                  fontSize: "1.1rem",
                  color: "#6e6e73",
                }}
              >
                <strong style={{ color: "#1d1d1f" }}>充电时间：</strong> 约1小时
              </li>
            </ul>
          </div>
        </div>

        {/* 底部购买按钮 */}
        <button
          style={{
            padding: "15px 40px",
            backgroundColor: "#0071e3",
            color: "white",
            border: "none",
            borderRadius: "30px",
            fontSize: "1.2rem",
            cursor: "pointer",
            fontWeight: "500",
            transition: "all 0.3s ease",
          }}
        >
          立即购买
        </button>

        {/* 回到顶部提示 */}
        <p
          style={{
            position: "absolute",
            bottom: "2rem",
            fontSize: "0.9rem",
            color: "#86868b",
            animation: "bounce 2s infinite",
          }}
        >
          滚动回到顶部 ↑
        </p>
      </div>
    </div>
  );
};

export default FullViewSplitScreenScroll;
